<template>
  <div>
    <ZWDrawer ref="zwRef" @close="close">
      <div class="content">
        <ZwTable ref="tableRef" class="table-box" :option="tableOption" :fetch-params="state.searchParams" :fetch-api="fetch()"> </ZwTable>
      </div>
    </ZWDrawer>
  </div>
</template>
<script lang="tsx" setup>
  import { ref, reactive, watch } from 'vue'
  import ZwTable from '@/components/zw/table/Table'
  import ZWDrawer from '@/components/ZWDrawer.vue'
  import { failDetail } from '@/api/customer/clubManage/commonSea'
  import { deepCopy } from '@/utils/helper'
  const emit = defineEmits(['close'])
  const zwRef = ref(null)
  const props = defineProps(['isopen', 'rowid', 'title'])
  const tableRef = ref<HTMLElement | null>(null)
  const defaultParams = { }
  const isopen = ref(false)
  const state = reactive({
    searchParams: deepCopy(defaultParams)
  })
  let tableOption = [
    
    {
      prop: 'line_number',
      width: 100,
      label: 'Excel行号'
    },
    {
      prop: 'name',
      label: '姓名'
    },
    {
      label: '手机号',
      prop: 'mobile',
      width: 200
    },
    {
      prop: 'fail_reason',
      label: '失败原因'
    },
  ]
  const getids = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(props.rowid)
      }, 1)
    })
  }
  const fetch = async() => {
    // 获取文件列表
    const id = await getids()
    return [{id}, failDetail]
  }
  const close = () => {
    emit('close')
  }
  watch(
    () => props.isopen,
    (val) => {
      if (val) {
        isopen.value = val
        zwRef.value.drawer = true
        zwRef.value.isShow = false
        zwRef.value.title = props.title
        zwRef.value.width = '800px'
      }
    }
  )
</script>
<style scoped lang="scss">
  .content {
    padding: 16px 0;
  }
</style>
